<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <link rel="stylesheet" href="../css/index1.css">
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/cookie.js"></script>

</head>

<body>
    <div class="ding">
        <div class="top">
            <div class="top_left">
                <a href="">小米商城</a>
                <span class="sep">|</span>
                <a href="">MIUI</a>
                <span class="sep">|</span>
                <a href="">IOT</a>
                <span class="sep">|</span>
                <a href="">云服务</a>
                <span class="sep">|</span>
                <a href="">天星数科</a>
                <span class="sep">|</span>
                <a href="">有品</a>
                <span class="sep">|</span>
                <a href="">小爱开放平台</a>
                <span class="sep">|</span>
                <a href="">企业团购</a>
                <span class="sep">|</span>
                <a href="">资质证照</a>
                <span class="sep">|</span>
                <a href="">协议规则</a>
                <span class="sep">|</span>
                <a href="">下载APP</a>
                <span class="sep">|</span>
                <a href="">智能生活</a>
                <span class="sep">|</span>
                <a href="">Select Location</a>

            </div>

            <div class="top_right">
                <a href="../html/shoppingcar.html" class="buycar">
                    <em>🛒</em>
                    <em>购物车</em>
                    <!-- <em>(0)</em> -->
                </a>
            </div>

            <div class="top_middle">

                <div href="" class="top_login">
                    <span>登录</span>
                    <div class="top_login_hide">
                        <p>个人中心</p>
                        <p>评价晒单</p>
                        <p>我的喜欢</p>
                        <p>小米账户</p>
                        <p class="exit">退出登录</p>
                    </div>
                </div>
                <span class="sep">|</span>
                <a href="./regist.html" class="top_regist">
                    注册
                </a>
                <span class="sep">|</span>
                <a href="">消息通知</a>

            </div>

        </div>
    </div>
    <div class="shang">

        <div class="container">

            <div class="header_logo">
                <a href=""><img src="../images/logo-mi2.png" alt=""></a>
            </div>
            <ul class="header_nav">
                <li>
                    小米手机
                </li>
                <li>
                    Redmi红米
                </li>
                <li>
                    电视
                </li>
                <li>
                    笔记本
                </li>
                <li>
                    平板
                </li>
                <li>
                    家电
                </li>
                <li>
                    路由器
                </li>
                <li>
                    智能硬件
                </li>
                <li>
                    服务
                </li>
                <li>
                    社区
                </li>
                <div class="header_nav_hide">
                    <ul class="mi_phone">

                    </ul>
                    <ul class="mi_redmi">

                    </ul>
                    <ul class="mi_tv">

                    </ul>
                    <ul class="mi_book">

                    </ul>
                    <ul class="mi_pad">

                    </ul>
                    <ul class="mi_jiadian">

                    </ul>
                    <ul class="mi_luyouqi">

                    </ul>
                    <ul class="mi_ai">

                    </ul>
                    <!-- <ul>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                        <li>9</li>
                    </ul>
                    <ul>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                        <li>10</li>
                    </ul> -->
                </div>
            </ul>
            <div class="header_search">
                <div>
                    <input type="search" name="" id="search" value="全部商品">
                    <span class="search_logo"><i class="iconfont icon">&#xe647</i></span>
                    <!-- <span class="search_logo"><img src="../font/搜索.png" alt=""></span> -->
                    <div class="search_show">
                        <ul>
                            <li class="search_show_all">全部商品</li>
                            <li>小米11</li>
                            <li>手机</li>
                            <li>空调</li>
                            <li>小米11S</li>
                            <li>净水器</li>
                            <li>红米</li>
                            <li>洗衣机</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="banner">
            <div class="left_nav">
                <ul class="left_nav_ul">
                    <li class="left_nav_ul_phone">手机
                        <div>
                            <ul>
                                <p>
                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                    <li class="left_nav_ul_tv">电视
                        <div>
                            <ul>
                                <p>
                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                    <li class="left_nav_ul_book">笔记本 平板
                        <div>
                            <ul>
                                <p>
                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                    <li class="left_nav_ul_jiadian">家电
                        <div>
                            <ul>
                                <p>
                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                    <li>出行 穿戴
                        <div>
                            <ul>
                                <p>

                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                    <li class="left_nav_ul_luyouqi">智能 路由器
                        <div>
                            <ul>
                                <p>
                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                    <li>电源 配件
                        <div>
                            <ul>
                                <p>

                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                    <li>健康 儿童
                        <div>
                            <ul>
                                <p>

                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                    <li>耳机 音箱
                        <div>
                            <ul>
                                <p>

                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                    <li>生活 箱包
                        <div>
                            <ul>
                                <p>

                                    <!-- <img src="../images/tv.jpg" alt=""> <span>小米电视</span> -->
                                </p>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="swiper">
                <div class="lunbo"><img src="../images/swiper_image (1).jpg" alt="" class="lunbo1"></div>
                <div class="lunbo"><img src="../images/swiper_image (1).webp" alt="" class="lunbo2"></div>
                <div class="lunbo"><img src="../images/swiper_image (2).webp" alt="" class="lunbo3"></div>
                <div class="lunbo"><img src="../images/swiper_image (3).webp" alt="" class="lunbo4"></div>
                <div class="lunbo"><img src="../images/swiper_image (4).webp" alt="" class="lunbo5"></div>
                <div class="lunbo"><img src="../images/swiper_image (5).webp" alt="" class="lunbo6"></div>
                <div class="lunbo"><img src="../images/swiper_image (1).jpg" alt="" class="lunbo1"></div>
            </div>
            <div class="swiper_left"><img src="../images/arrow-left-bold.png" alt=""> </div>
            <div class="swiper_right"><img src="../images/arrow-right-bold.png" alt=""></div>
            <ul class="dian">
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="banner_bottom">
            <div class="banner_bottom_left">
                <ul>
                    <li>
                        <div><img src="../font/shijian.png" alt=""></div>
                        <p>保障服务</p>
                    </li>
                    <li>
                        <div><img src="../font/qiye.png" alt=""></div>
                        <p>企业团购</p>
                    </li>
                    <li>
                        <div><img src="../font/F.png" alt=""></div>
                        <p>F吗通道</p>
                    </li>
                    <li>
                        <div><img src="../font/SIMka.png" alt=""></div>
                        <p>米粉卡</p>
                    </li>
                    <li>
                        <div><img src="../font/duihuan.png" alt=""></div>
                        <p>以旧换新</p>
                    </li>
                    <li>
                        <div> <img src="../font/24huafei.png" alt=""> </div>
                        <p>话费充值</p>
                    </li>
                </ul>
            </div>
            <div class="banner_bottom_right">
                <div class="banner_bottom_right_first"><img src="../images/banner_bottom_right_1.jpg" alt=""></div>
                <div class="banner_bottom_right_second"><img src="../images/banner_bottom_right_1.png" alt=""></div>
                <div class="banner_bottom_right_third"><img src="../images/banner_bottom_right_2.jpg" alt=""></div>
            </div>
        </div>
    </div>
    <div class="zhong">
        <div class="Redmi_K40">
            <img src="../images/K40.webp" alt="">
        </div>
        <div>
            <div style="width: 1226px;height: 50px;margin: auto;font-size: 30px;">手机 </div>
        </div>
        <div class="index_phone">
            <div class="index_phone_left">
                <div class="index_phone_left_above">
                    <img src="../images/mix_foldwebp.webp" alt="">
                </div>
            </div>
            <div class="index_phone_right">

                <div>
                    <div>
                        <img src="../images/4f44496b62bac0206fb8bdbeae9d4a28.webp" alt="">
                    </div>
                    <h3>Xiao mi Civi</h3>
                    <p>2599 <span> 元起 </span></p>
                </div>

            </div>

        </div>
    </div>


    <div class="aside_nav">
        <div>
            <div><img src="../font/tel.png" alt=""></div>
            <p> 手机APP</p>
        </div>
        <div>
            <div><img src="../font/touxiang.png" alt=""></div>
            <p>个人中心</p>
        </div>
        <div>
            <div><img src="../font/banshou.png" alt=""></div>
            <p>售后服务</p>
        </div>
        <div>
            <div><img src="../font/kefu.png" alt=""></div>
            <p>人工客服</p>
        </div>
        <div class="to_shoppingcar">
            <div><img src="../font/gouwuchekong.png" alt=""></div>
            <p>购物车</p>
        </div>
    </div>

    <div class="back_top">
        <div>
            <img src="https://i1.mifile.cn/f/i/2018/home/totop.png" alt="">
            <!-- <img src="https://i1.mifile.cn/f/i/2018/home/totop_hover.png" alt=""> -->
        </div>
        <P>回顶部</P>
    </div>

    <div class="xia">
        <div class="make">
            <div>
                预约维修服务
            </div>
            <div>
                7天无理由退货
            </div>
            <div>
                15天免费换货
            </div>
            <div>
                满89包邮
            </div>
            <div>
                520余家售后网点
            </div>
        </div>
        <div class="line">
        </div>
        <div class="help">
            <div class="help_left">
                <ul>
                    <li>帮助中心</li>
                    <li>账户管理</li>
                    <li>购物指南</li>
                    <li>订单操作</li>
                </ul>
                <ul>
                    <li>服务支持</li>
                    <li>售后政策</li>
                    <li>自动服务</li>
                    <li>相关下载</li>
                </ul>
                <ul>
                    <li>线下门店</li>
                    <li>小米之家</li>
                    <li>服务网点</li>
                    <li>授权体验店</li>
                </ul>
                <ul>
                    <li>关于小米</li>
                    <li>了解小米</li>
                    <li>加入小米</li>
                    <li>投资者关系</li>
                    <li>企业社会责任</li>
                    <li>廉洁举报</li>
                </ul>
                <ul>
                    <li>关注我们</li>
                    <li>新浪微博</li>
                    <li>官方微信</li>
                    <li>联系我们</li>
                    <li>公益基金会</li>
                </ul>
                <ul>
                    <li>特色服务</li>
                    <li>F吗通道</li>
                    <li>礼物码</li>
                    <li>防伪查询</li>
                </ul>
            </div>
            <div class="help_right">
                <h1>400-100-5678</h1>
                <p>8:00-18:00(仅限市话费)</p>
                <div>
                    人工客服
                </div>
                <h2>关注小米 <img src="../font/xinlang.png" alt=""> <img src="../font/weixin.png" alt=""></h2>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer_">
            <div class="footer_left">
                <img src="../images/logo.png" alt="">
            </div>
            <div class="footer_right">
                <p style="color: #757575;">
                    小米商城 | MIUI | 米家 | 米聊 | 多看 | 游戏 | 政企服务 | 小米天猫店 | 小米集团隐私政策 | 小米公司儿童信息保护规则 | 小米商城隐私政策 | 小米商城用户协议 | 问题反馈 | Select Location
                </p>
                <p style="color: #757575;">
                    北京互联网法院法律服务工作站 | 中国消费者协会 | 北京市消费者协会
                </p>
                <p>
                    © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号
                </p>
                <p>
                    （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告
                </p>
                <p>增值电信业务许可证 网络食品经营备案 京食药网食备202010048 食品经营许可证</p>
                <p>
                    违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
                <h1>
                    让全球每个人都能享受科技带来的美好生活
                </h1>
            </div>
        </div>

    </div>



</body>
<script src="../js/swiper.js"></script>
<script src="../js/index1.js"></script>
<script>
    $(".to_shoppingcar").click(function() {
        location.href = "../html/shoppingcar.html"
    });

    //6545646
    //151515
    ///
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if (top > 1000) {
            $(".aside_nav").css({
                top: 145
            })
            $(".back_top").css({
                display: "block",
                top: 621
            })
        } else {
            $(".aside_nav").css({
                top: 230
            })
            $(".back_top").css({
                display: "none"
            })
        }
    })

    $(".back_top").click(function() {
        $(document).scrollTop(0);
    })


    $(".Redmi_K40").click(function() {
        $.post("../php/index_goods_show.php", {
            key: "Redmi K40"
        }, function(data) {
            var result = JSON.parse(data);
            var obj = result[2];
            var {
                imgid,
                title,
                price,
                gid
            } = obj;
            location.href = "../html/detail.html?gid=" + gid;
        })
    })

    $(".index_phone_left_above").click(function() {
        $.post("../php/index_goods_show.php", {
            key: "MIX FOLD 折叠屏手机"
        }, function(data) {
            var result = JSON.parse(data);
            var [{
                imgid,
                title,
                price,
                gid
            }] = result;
            location.href = "../html/detail.html?gid=" + gid;
        })
    })


    $(".index_phone_right>div").bind({
        mouseenter: function() {
            $(this).addClass("current");
        },
        mouseleave: function() {
            $(this).removeClass("current");
        }
    })
    $(".index_phone_left").bind({
        mouseenter: function() {
            $(this).addClass("current");
        },
        mouseleave: function() {
            $(this).removeClass("current");
        }
    })
    $.post("../php/index_phone.php", function(data) {
        var result = JSON.parse(data);
        // console.log(result);
        var html = "";
        result.forEach(({
            gid,
            imgid,
            price,
            title,
            img_1
        }) => {
            html += `
                  <div data-id="${gid}">
                    <div>
                        <img src="${img_1}" alt="">
                    </div>
                    <h3>${title}</h3>
                    <p>${price} <span> 元起 </span></p>
                </div>
                `
        });
        $(".index_phone_right").html(html);
    })
    $(".index_phone_right").on("click", "div", function() {
        var gid = $(this).attr("data-id");
        location.href = "../html/detail.html?gid=" + gid;
    })
</script>

</html>